<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/dj_public.css">
    <link rel="stylesheet" href="css/dj_index.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <!-- 顶部导航 -->
        <div class="mainnav">
            <main>
                <div class="Lside">
                    <a href="#"><i class="icon"></i>手机版</a>
                    <u>|</u>
                    <a href="#">Q币充值</a>
                </div>
                <!-- 右侧nav -->
                <div class="Rside">
                    <a href="#" class="icon">游戏导航</a>
                    <u>|</u>
                    <a href="#">帮助中心</a>
                    <u>|</u>
                    <a href="html/jc_person_myorder.html">个人中心</a>
                    <u>|</u>
                    <a href="#">我的订单</a>
                    <u>|</u>
                    <div>您还未登录，请<a href="#">登录</a></div>
                </div>
                <!-- 右侧nav结束 -->
            </main>
            <!-- 导航菜单 -->
            <div class="boxmain spr">
                <div class="inner spr">
                    <span class="spr"></span>
                    <div class="lst ath gamejj">
                        <h2 class="name spr">
                            竞技游戏
                            <span class="amount">(10)</span>
                        </h2>
                        <!-- 数据渲染 -->
                    </div>
                    <div class="lst gamexy">
                        <h2 class="name spr">
                            休闲游戏
                            <span class="amount">(3)</span>
                        </h2>
                        <!-- 数据渲染 -->
                    </div>
                    <div class="lst mmo gamecos">
                        <h2 class="name spr">
                            角色扮演
                            <span class="amount">(17)</span>
                        </h2>
                        <!-- 数据渲染 -->
                    </div>
                    <div class="lst gamewy">
                        <h2 class="name spr">
                            网页游戏
                            <span class="amount">(5)</span>
                        </h2>
                        <!-- 数据渲染 -->
                    </div>
                </div>
            </div>
            <!-- 导航菜单结束 -->
        </div>

        <!-- 搜索 -->
        <div class="search">
            <main>
                <h1><img src="images/dj_index_logo.png" alt=""></h1>
                <div class="box">
                    <div class="button">选择游戏<i class="icon"></i>
                        <div class="choose">
                            <dl class="gamejj">
                                <dt>竞技游戏：</dt>
                                <dd class="clear_fix">
                                    <a href="#">穿越火线</a>
                                    <i>|</i>
                                    <a href="#">FIFA OL4</a>
                                    <i>|</i>
                                    <a href="#">NBA2KOL2</a>
                                    <i>|</i>
                                    <a href="#">极品飞车OL</a>
                                    <i>|</i>
                                    <a href="#">战争雷霆</a>
                                    <i>|</i>
                                    <a href="#">NBA2KOL</a>
                                    <i>|</i>
                                    <a href="#">英雄联盟</a>
                                    <i>|</i>
                                    <a href="#">枪神纪</a>
                                    <i>|</i>
                                    <a href="#">逆战</a>
                                </dd>
                            </dl>
                            <dl class="gamexy">
                                <dt>休闲游戏：</dt>
                                <dd class="clear_fix">
                                    <a href="#">QQ炫舞2</a>
                                    <i>|</i>
                                    <a href="#">飞车</a>
                                    <i>|</i>
                                    <a href="#">炫舞</a>
                                </dd>
                            </dl>
                            <dl class="gamecos">
                                <dt>角色扮演：</dt>
                                <dd class="clear_fix">
                                    <a href="#">上古世纪</a>
                                    <i>|</i>
                                    <a href="#">冒险岛</a>
                                    <i>|</i>
                                    <a href="#">QQ幻想</a>
                                    <i>|</i>
                                    <a href="#">斗战神</a>
                                    <i>|</i>
                                    <a href="#">地下城与勇士</a>
                                    <i>|</i>
                                    <a href="#">轩辕</a>
                                    <i>|</i>
                                    <a href="#">天堂2</a>
                                    <i>|</i>
                                    <a href="#">仙侠传</a>
                                    <i>|</i>
                                    <a href="#">自由幻想</a>
                                    <i>|</i>
                                    <a href="#">天堂</a>
                                    <i>|</i>
                                    <a href="#">幻想世界</a>
                                    <i>|</i>
                                    <a href="#">QQ三国</a>
                                    <i>|</i>
                                    <a href="#">疾风之刃</a>
                                    <i>|</i>
                                    <a href="#">刀剑2</a>
                                    <i>|</i>
                                    <a href="#">剑灵</a>
                                    <i>|</i>
                                    <a href="#">御龙在天</a>
                                    <i>|</i>
                                    <a href="#">天涯明月刀</a>
                                </dd>
                            </dl>
                            <dl class="gamewy">
                                <dt>网页游戏：</dt>
                                <dd class="clear_fix">
                                    <a href="#">英魂之刃</a>
                                    <i>|</i>
                                    <a href="#">火影忍者Online</a>
                                    <i>|</i>
                                    <a href="#">部落守卫战(网页版)</a>
                                    <i>|</i>
                                    <a href="#">宠物大乐斗</a>
                                    <i>|</i>
                                    <a href="#">烽火战国</a>
                                </dd>
                            </dl>
                        </div>
                    </div>

                    <input value="请选择游戏搜索道具">
                    <button class="btn"></button>
                </div>
                <div class="right"><a href="#"></a></div>
            </main>
        </div>
    </header>


    <!-- 导航 -->
    <nav>
        <main>
            <!-- 游戏分类 -->
            <div class="allgame">
                <a href="#"><i class="icon"></i>所有游戏分类</a>
                <div class="box">
                    <div class="top">
                        <i class="icon all"></i>
                        <span>所有游戏分类</span>
                    </div>
                    <dl class="bot">
                        <dt>
                            <i class="icon hot"></i>
                            <span>热门游戏</span>
                            <i class="icon right"></i>
                        </dt>
                        <dd>
                            <div>
                                <a href="#">CF高清竞技大区</a>
                                <a href="#">穿越火线</a>
                                <a href="#">FIFA OL4</a>
                                <a href="#">NBA2KOL2</a>
                                <a href="#">冒险岛2</a>
                                <a href="#">火影忍者Online</a>
                                <a href="#">NBA2KOL</a>
                                <a href="#">地下城与勇士</a>
                            </div>
                            <div>
                                <a href="#">QQ三国</a>
                                <a href="#">英雄联盟</a>
                                <a href="#">剑灵</a>
                                <a href="#">御龙在天</a>
                                <a href="#">逆战</a>
                                <a href="#">飞车</a>
                                <a href="#">天涯明月刀</a>
                                <a href="#">炫舞</a>
                            </div>
                        </dd>
                    </dl>
                    <dl class="bot">
                        <dt>
                            <i class="icon cosplay"></i>
                            <span>角色扮演</span>
                            <i class="icon right"></i>
                        </dt>
                        <dd>
                            <div>
                                <a href="#">上古世纪</a>
                                <a href="#">冒险岛2</a>
                                <a href="#">QQ幻想</a>
                                <a href="#">斗战神</a>
                                <a href="#">地下城与勇士</a>
                                <a href="#">轩辕</a>
                                <a href="#">天堂2</a>
                                <a href="#">仙侠传</a>
                            </div>
                            <div>
                                <a href="#">自由幻想</a>
                                <a href="#">天堂</a>
                                <a href="#">幻想世界</a>
                                <a href="#">QQ三国</a>
                                <a href="#">疾风之刃</a>
                                <a href="#">刀剑2</a>
                                <a href="#">剑灵</a>
                                <a href="#">御龙在天</a>
                            </div>
                            <div>
                                <a href="#">天涯明月刀</a>
                            </div>
                        </dd>
                    </dl>
                    <dl class="bot">
                        <dt>
                            <i class="icon sports"></i>
                            <span>竞技游戏</span>
                            <i class="icon right"></i>
                        </dt>
                        <dd>
                            <div>
                                <a href="#">CF高清竞技大区</a>
                                <a href="#">穿越火线</a>
                                <a href="#">FIFA OL4</a>
                                <a href="#">极品飞车OL</a>
                                <a href="#">NBA2KOL2</a>
                                <a href="#">战争雷霆</a>
                                <a href="#">NBA2KOL</a>
                                <a href="#">英雄联盟</a>
                            </div>
                            <div>
                                <a href="#">枪神纪</a>
                                <a href="#">逆战</a>
                            </div>
                        </dd>
                    </dl>
                    <dl class="bot">
                        <dt>
                            <i class="icon relax"></i>
                            <span>休闲游戏</span>
                            <i class="icon right"></i>
                        </dt>
                        <dd>
                            <div>
                                <a href="#">QQ炫舞</a>
                                <a href="#">飞车</a>
                                <a href="#">炫舞</a>
                            </div>
                        </dd>
                    </dl>
                    <dl class="bot">
                        <dt>
                            <i class="icon web"></i>
                            <span>网页游戏</span>
                            <i class="icon right"></i>
                        </dt>
                        <dd>
                            <div>
                                <a href="#">英魂之刃</a>
                                <a href="#">火影忍者Online</a>
                                <a href="#">部落守卫战（网页版）</a>
                                <a href="#">宠物大乐斗</a>
                                <a href="#">烽火战国</a>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
            <!-- 导航条 -->
            <ul>
                <li><a href="#" class="active">首页</a></li>
                <li class="popup">
                    <a href="#">活动中心</a>
                    <div>
                        <a href="#">闪购专区</a>
                        <a href="#">淘宝贝</a>
                    </div>
                </li>
                <li class="new">
                    <a href="html/jc_index.html">聚诚品</a>
                    <div>NEW</div>
                </li>
                <li><a href="#">手游中心</a></li>
                <li><a href="html/jc_limitTime.html">聚豆商城</a></li>
                <li><a href="html/jc_person_myorder.html">个人中心</a></li>
            </ul>
            <!-- 购物车 -->
            <div class="shop">
                <a href="html/jc_shoppingCart.html">
                    <i class="icon"></i>
                    <span>购物车</span>
                    <u>0</u>
                </a>
            </div>
        </main>
    </nav>

    <!-- 主体内容 -->
    <section>
        <div class="sec1 clear_fix sec">
            <!-- 轮播 -->
            <div class="carousel">
                <div class="imgbox  clear_fix">
                    <div>
                        <img src="./images/dj_index_carousel1.png" alt="">
                        <s></s>
                        <p>火线实验室6期</p>
                    </div>
                    <div>
                        <img src="./images/dj_index_carousel2.png" alt="">
                        <s></s>
                        <p>勇往直前</p>
                    </div>
                    <div>
                        <img src="./images/dj_index_carousel3.png" alt="">
                        <s></s>
                        <p>青龙秘宝</p>
                    </div>
                    <div>
                        <img src="./images/dj_index_carousel4.png" alt="">
                        <s></s>
                        <p>约德尔人盲盒</p>
                    </div>
                    <div>
                        <img src="./images/dj_index_carousel5.png" alt="">
                        <s></s>
                        <p>十二周年礼包</p>
                    </div>
                </div>
                <ul>
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <!-- 右侧信息 -->
            <div class="right">
                <!-- 个人信息 -->
                <div class="person">
                    <!-- 未登录 -->
                    <!-- <div class="unlogin">
                        <div class="unlogin_box">
                            <img src="./images/dj_index_default.gif" alt="">
                            <p>您还未登录哦，<a href="#">立即登录</a>购买超值商品</p>
                        </div>
                    </div> -->
                    <!-- 未登录结束 -->
                    <!-- 登录 -->
                    <div class="login">
                        <div class="login_box">
                            <div class="fl usr_img">
                                <a href="#"><img src="./images/dj_index_login_tx.jpg" alt=""></a>
                            </div>
                            <p class="qqintro">
                                <b class="mr10 qq-index">name</b>
                                <span class="bean-num"> 
                                    <i class="bean new-acticon"></i>
                                    <span>0</span>
                                </span>
                            </p>
                            <p class="gthbox">
                                <a href="#" class="icon ico_nonvip"></a>
                                <a href="#" class="barbox">
                                    <span class="svaluebar"></span>
                                    <span class="svover" style="width: 0.00214px;"></span>
                                    <span class="gthbar-num">1/50000</span>
                                </a>
                            </p>
                        </div>
                        
                    </div>
                    <!-- 登录结束 -->
                    <div class="game">
                        <h5>推荐游戏</h5>
                        <div>
                            <figure>
                                <img src="./images/dj_game_lol.jpg" alt="">
                                <figcaption>英雄联盟</figcaption>
                            </figure>
                            <figure>
                                <img src="./images/dj_game_bns.jpg" alt="">
                                <figcaption>剑灵</figcaption>
                            </figure>
                            <figure>
                                <img src="./images/dj_game_cf.jpg" alt="">
                                <figcaption>穿越火线</figcaption>
                            </figure>
                        </div>
                    </div>
                </div>
                <!-- 新闻 -->
                <div class="news">
                    <div>
                        <h5>公告</h5>
                        <a href="#">更多</a>
                    </div>
                    <ul>
                        <li>
                            <a href="#">QQ仙侠传聚豆商城道具下架</a>
                            <i>12/22</i>
                        </li>
                        <li>
                            <a href="#">英魂之刃道聚城商城下架公告</a>
                            <i>11/19</i>
                        </li>
                        <li>
                            <a href="#">DNF聚豆兑换更新公告</a>
                            <i>11/08</i>
                        </li>
                        <li>
                            <a href="#">【CFHD】12款枪械入选道聚</a>
                            <i>09/17</i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 热卖推荐 -->
        <div class="sec2 clear_fix sec">
            <!-- 左 -->
            <div class="left">
                <div class="title">
                    <i class="icon"></i>
                    <h2>热卖推荐</h2>
                </div>
                <div class="box clear_fix">
                    <!-- 数据渲染 -->
                    
                </div>
            </div>
            <!-- 右 -->
            <fiv class="right">
                <div class="title">
                    <i class="icon"></i>
                    <h2>每日惊喜</h2>
                </div>
                <div class="box">
                    <dl>
                        <dt>
                            <a href="#"><img src="./images/dj_tymyd.png" alt=""></a>
                        </dt>
                        <dd>
                            <p>
                                <b>[天涯明月刀]</b>
                                铸神令*100
                            </p>
                            <p class="red">
                                秒杀价：
                                <b>50.00QB</b>
                            </p>
                            <p>
                                <span class="time">
                                    <!-- 数据渲染，定时器 -->
                                </span>
                            </p>
                            <a href="#" class="button">查看详情</a>
                        </dd>
                        <dd class="pos bg">独家秒杀</dd>
                    </dl>
                </div>
            </fiv>
        </div>

        <!-- 猜你喜欢 -->
        <div class="sec3 clear_fix sec">
            <div class="left">
                <div class="title">
                    <i class="icon"></i>
                    <h2>猜你喜欢</h2>
                    <span class="h_gray">|</span>
                    <a href="javascript:;" class="blue">换一换></a>
                </div>
                <div class="box">
                    <!-- 数据渲染 -->
                </div>
            </div>
            <div class="right">
                <div class="title">
                    <i class="icon"></i>
                    <h2>每日签到</h2>
                </div>
                <div class="box">
                    <a href="#" class="button">
                        <i class="icon"></i>
                        我要签到
                    </a>
                    <div class="tip">
                        <p>今日签到可获得5个聚豆</p>
                        <p><a href="#">下载手机道聚城最高可获得40聚豆</a></p>
                    </div>
                </div>
                <div class="code">
                    <img src="./images/dj_code.png" alt="">
                    <p>扫码进入掌上道聚城每日签到</p>
                </div>
            </div>
        </div>

        <!-- 精彩活动 -->
        <div class="sec4 clear_fix sec">
            <div class="title">
                <a href="#" class="blue">更多></a>
                <i class="icon"></i>
                <h2>精彩活动</h2>
            </div>
            <div class="box">
                <ul>
                    <li><a href="#"><img src="./images/dj_sec4_1.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/dj_sec4_2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/dj_sec4_3.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/dj_sec4_4.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/dj_sec4_5.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/dj_sec4_6.jpg" alt=""></a></li>
                </ul>
            </div>
        </div>

        <!-- 游戏专区 -->
        <div class="gamebox">
            <!-- 英雄联盟 -->
            <div class="lol clear_fix sec">
                <div class="title">
                    <a href="#" class="blue">更多></a>
                    <i class="icon"></i>
                    <h2>英雄联盟专区</h2>
                </div>
                <div class="box clear_fix">
                    <div class="pic">
                        <a href="#"><img src="./images/dj_index_lol1.jpg" alt=""></a>
                    </div>
                    <div class="list">
                        <ul class="clear_fix listtop">
                            <!-- 数据渲染 -->

                        </ul>
                        <ul class="clear_fix listbot">
                            <!-- 数据渲染 -->
                        </ul>
                    </div>
                    <div class="rank">
                        <dl>
                            <!-- 数据渲染 -->
                        </dl>
                    </div>
                </div>
            </div>
            <!-- 穿越火线 -->
            <div class="cf clear_fix sec">
                <div class="title">
                    <a href="#" class="blue">更多></a>
                    <i class="icon"></i>
                    <h2>穿越火线专区</h2>
                </div>
                <div class="box clear_fix">
                    <div class="pic">
                        <a href="#"><img src="./images/dj_index_cf1.jpg" alt=""></a>
                    </div>
                    <div class="list">
                        <ul class="clear_fix listtop">
                            <!-- 数据渲染 -->
                        </ul>
                        <ul class="clear_fix listbot">
                            <!-- 数据渲染 -->
                        </ul>
                    </div>
                    <div class="rank">
                        <dl>
                            <!-- 数据渲染 -->
                        </dl>
                    </div>
                </div>
            </div>
            <!-- 剑灵 -->
            <div class="jl clear_fix sec">
                <div class="title">
                    <a href="#" class="blue">更多></a>
                    <i class="icon"></i>
                    <h2>剑灵专区</h2>
                </div>
                <div class="box clear_fix">
                    <div class="pic">
                        <a href="#"><img src="./images/dj_index_bns1.jpg" alt=""></a>
                    </div>
                    <div class="list">
                        <ul class="clear_fix listtop">
                            <!-- 数据渲染 -->
                        </ul>
                        <ul class="clear_fix listbot">
                           <!-- 数据渲染 -->
                        </ul>
                    </div>
                    <div class="rank">
                        <dl>
                            <!-- 数据渲染 -->
                        </dl>
                    </div>
                </div>
            </div>
            <!-- 御龙在天 -->
            <div class="ylzt clear_fix sec">
                <div class="title">
                    <a href="#" class="blue">更多></a>
                    <i class="icon"></i>
                    <h2>御龙在天专区</h2>
                </div>
                <div class="box clear_fix">
                    <div class="pic">
                        <a href="#"><img src="./images/dj_index_ylzt1.jpg" alt=""></a>
                    </div>
                    <div class="list">
                        <ul class="clear_fix listtop">
                           <!-- 数据渲染 -->
                        </ul>
                        <ul class="clear_fix listbot">
                            <!-- 数据渲染 -->
                        </ul>
                    </div>
                    <div class="rank">
                        <dl>
                           <!-- 数据渲染 -->
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- 广告 -->
        <div class="sec6 clear_fix sec">
            <ul>
                <li>
                    <a href="#"><img src="./images/dj_index_sec6_1.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./images/dj_index_sec6_2.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./images/dj_index_sec6_3.png" alt=""></a>
                </li>
            </ul>
        </div>

    </section>

    <!-- 底部 -->
    <footer>
        <div class="top">
            <div class="left">
                <div>
                    <h6>
                        <i class="icon"></i>
                        <span>我是新手</span>
                    </h6>
                    <ul>
                        <li><a href="#">什么是道聚城</a></li>
                        <li><a href="#">如何购买</a></li>
                        <li><a href="#">如何赠送</a></li>
                        <li><a href="#">如何获取聚豆</a></li>
                    </ul>
                </div>
                <div>
                    <h6>
                        <i class="icon"></i>
                        <span>个人中心</span>
                    </h6>
                    <ul>
                        <li><a href="#">发货时间</a></li>
                        <li><a href="#">如何领取</a></li>
                        <li><a href="#">补发规则</a></li>
                        <li><a href="#">Vip价定义</a></li>
                    </ul>
                </div>
                <div>
                    <h6>
                        <i class="icon"></i>
                        <span>支付方式</span>
                    </h6>
                    <ul>
                        <li><a href="#">支付方式</a></li>
                        <li><a href="#">购物点支付</a></li>
                        <li><a href="#">如何充值</a></li>
                    </ul>
                </div>
                <div>
                    <h6>
                        <i class="icon"></i>
                        <span>腾讯在线服务</span>
                    </h6>
                    <ul>
                        <li><a href="#">腾讯官方在线客服</a></li>
                        <a href="#"></a>
                    </ul>
                </div>
            </div>
            <div class="right">
                <figure>
                    <img src="images/dj_zsdjc.png" alt="">
                    <figcaption>掌上道聚城</figcaption>
                </figure>
                <figure>
                    <img src="images/dj_wechatdjc.png" alt="">
                    <figcaption>道聚城公众号</figcaption>
                </figure>
            </div>
        </div>
        <div class="bottom">
            <p>
                <a href="#">腾讯互动娱乐</a>
                |
                <a href="#">服务条款</a>
                |
                <a href="#">腾讯游戏隐私保护指引</a>
                |
                <a href="#">腾讯游戏儿童隐私保护指引</a>
                |
                <a href="#">广告服务</a>
                |
                <a href="#">腾讯游戏招聘</a>
                |
                <a href="#">腾讯游戏客服</a>
                |
                <a href="#">游戏地图</a>
                |
                <a href="#">成长守护平台</a>
                |
                <a href="#">商务合作</a>
                |
                <a href="#">网站导航</a>
            </p>
            <p>COPYRIGHT &copy; 1998-2020 TENCENT.ALL RIGHTS RESERVED.</p>
            <p>
                <a href="#">腾讯公司 版权所有</a>
            </p>
        </div>
    </footer>

    <!-- 侧边固定 -->
    <div class="fixednav">
        <a href="#top">
            <i class="bg"></i>
            返回顶部
        </a>
        <a href="#">反馈</a>
    </div>

    <script src="./js/jquery-1.11.3.js"></script>
    <script src="./js/dj_index.js"></script>
</body>
</html>